<%--
  Created by IntelliJ IDEA.
  User: SYHT
  Date: 2017/5/9
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <jsp:include page="documentForeEnd.jsp"/>
    <link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/dist/foreEnd/css/calender.css">
    <link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/dist/foreEnd/css/bootstrap.css">

    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/highchart.js"></script>
    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/calendar.js"></script>
    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/合格年.js"></script>
    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/合格月.js"></script>
    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/待命年.js"></script>
    <script src="${pageContext.request.contextPath}/dist/foreEnd/js/待命月.js"></script>



</head>
<body>
<header>
<jsp:include page="headerForeEnd2.jsp"/>
</header>
<div style="clear: both"></div>
<div class="container">
    <div class="home_center col-md-12">
        <div class="trends col-md-6">
            <form action="" method="post">
                <textarea class="txt2" disabled>动态</textarea>
            </form>
        </div>
        <div class="calendar col-md-5">
            <div id="ca"></div>
        </div>
        <div style="clear: both"></div>
    </div>


<div style="clear: both"></div>

    <!--折线图-->
    <div id="chart"></div>

    <%--柱状图--%>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div style="clear: both"></div>
    <div id="chart3"></div>
    <div id="chart4"></div>

    <div>
        <div></div>
        <div></div>
    </div>
</div>

<!--<script type="text/javascript" src="js/canvas-particle.js"></script>-->
<script type="text/javascript">
    $(document).ready(function () {
        $('#nav li').hover(function () {
            $('ul', this).slideDown(200);
            $(this).children('a:first').addClass("hov");
        }, function () {
            $('ul', this).slideUp(100);
            $(this).children('a:first').removeClass("hov");
        });
    });
</script>

<!--日历-->
<script>
    $('#ca').calendar({
        width: 380,
        height: 320,
        data: [
            {
                date: '2017/12/24',
                value: 'Christmas Eve'
            },
            {
                date: '2017/12/25',
                value: 'Merry Christmas'
            },
            {
                date: '2017/01/01',
                value: 'Happy New Year'
            }
        ],
        onSelected: function (view, date, data) {
            console.log('view:' + view)
            alert('date:' + date)
            console.log('data:' + (data || 'None'));
        }
    });
    $('#dd').calendar({
        trigger: '#dt',
        zIndex: 999,
        format: 'yyyy-mm-dd',
        onSelected: function (view, date, data) {
            console.log('event: onSelected')
        },
        onClose: function (view, date, data) {
            console.log('event: onClose')
            console.log('view:' + view)
            console.log('date:' + date)
            console.log('data:' + (data || 'None'));
        }
    });
</script>

<!--折线图-->
<script language="JavaScript">
    $(document).ready(function () {
        var title = {
            text: '本月员工考勤记录'
        };
        var subtitle = {
            text: ''
        };
        var xAxis = {
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
                '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'
                , '24', '25', '26', '27', '28', '29', '30', '31']
        };
        var yAxis = {

            title: {
                text: '时间 (小时)'
            },
            plotLines: [{
                value: 8.5,
                dashStyle: 'Dash',
                width: 1,
                color: '#666'
            },

                {
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],
            tickPositions: [0, 5, 10, 15, 20]
        };

        var tooltip = {
            valueSuffix: '小时'
        };

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series = [
            {
                name: '工作时间',
                data: [10, 2, 3, 8, 15, 6, 7, 3, 9, 10, 11, 12, 13, 14, 15, 10, 9, 8,
                    10, 11, 5, 10, 9, 9, 8, 12, 12, 14, 15, 10, 11],
                color: '#ed687c'

            }

        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#chart').highcharts(json);
    });
</script>
</body>
</html>
